<template>
    <div class="schedule-details-management">
        <el-card class="box-card">
            <!-- 排班详情编辑对话框 -->
            <el-dialog
                    title="编辑排班详情"
                    :visible.sync="detailDialogVisible"
                    width="50%"
                    :before-close="handleDetailClose">
                <el-form
                        ref="detailForm"
                        :rules="detailRules"
                        :model="detailForm"
                        label-width="120px"
                        class="demo-form-inline">
                    <el-form-item label="星期" prop="dayOfWeek">
                        <el-select v-model="detailForm.dayOfWeek" placeholder="选择星期">
                            <el-option label="星期一" value="星期一"></el-option>
                            <el-option label="星期二" value="星期二"></el-option>
                            <el-option label="星期三" value="星期三"></el-option>
                            <el-option label="星期四" value="星期四"></el-option>
                            <el-option label="星期五" value="星期五"></el-option>
                            <el-option label="星期六" value="星期六"></el-option>
                            <el-option label="星期天" value="星期天"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上班时间" prop="startTime">
                        <el-time-picker
                                v-model="detailForm.startTime"
                                clearable
                                type="time"
                                placeholder="选择上班时间"
                                align="right"
                                value-format="HH:mm:ss">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="下班时间" prop="endTime">
                        <el-time-picker
                                v-model="detailForm.endTime"
                                clearable
                                type="time"
                                placeholder="选择下班时间"
                                align="right"
                                value-format="HH:mm:ss">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="是否工作日" prop="isWorkday">
                        <el-switch v-model="detailForm.isWorkday"></el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <el-button @click="handleDetailCancel">取 消</el-button>
          <el-button type="primary" @click="submitDetail">确 定</el-button>
        </span>
            </el-dialog>

            <!-- 排班详情列表 -->
            <div class="manage-header">
                <el-button
                        style="margin: 0 0 10px 0"
                        size="small"
                        type="primary"
                        @click="handleAddDetail">新增排班详情</el-button>
            </div>
            <div class="common-table">
                <el-table
                        :data="scheduleDetails"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            show-overflow-tooltip
                            prop="dayOfWeek"
                            label="星期"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            label="上班时间"
                            width="250">
                        <template slot-scope="scope">
                            {{ formatTime(scope.row.startTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="下班时间"
                            width="250">
                        <template slot-scope="scope">
                            {{ formatTime(scope.row.endTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            prop="isWorkday"
                            label="是否工作日"
                            width="100">
                        <template slot-scope="scope">
                            {{ scope.row.isWorkday ? "是" : "否" }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            width="200"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    plain
                                    size="mini"
                                    @click="handleEditDetail(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    plain
                                    size="mini"
                                    type="danger"
                                    @click="handleDeleteDetail(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {getScheduleDetailsList, addScheduleDetail, updateScheduleDetail, deleteScheduleDetailById} from "@/api/Schedule";

    export default {
        data() {
            return {
                detailDialogVisible: false,
                detailForm: {
                    scheduleId: '',
                    dayOfWeek: '',
                    startTime: '',
                    endTime: '',
                    isWorkday: ''
                },
                detailRules: {
                    dayOfWeek: [{ required: false, message: "请选择星期", trigger: "change" }],
                    startTime: [{ required: false, message: "请选择上班时间", trigger: "change" }],
                    endTime: [{ required: false, message: "请选择下班时间", trigger: "change" }]
                },
                scheduleDetails: [],
            };
        },
        methods: {
            formatTime(time) {
                if (!time) return "";
                // 直接分割时间部分，保留小时和分钟
                return time.split(":").slice(0, 2).join(":");
            },
            submitDetail() {
                this.$refs.detailForm.validate((valid) => {
                    if (valid) {
                        if (this.detailForm.id) {
                            updateScheduleDetail(this.detailForm).then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("修改成功");
                                    this.getDetailsList();
                                } else {
                                    this.$message.error(res.data.message);
                                }
                                this.detailDialogVisible = false;
                            });
                        } else {
                            console.log(this.detailForm)
                            addScheduleDetail(this.detailForm).then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("添加成功");
                                    this.getDetailsList();
                                } else {
                                    this.$message.error(res.data.message);
                                }
                                this.detailDialogVisible = false;
                            });
                        }
                    }
                });
            },
            handleDetailClose() {
                this.detailForm = {
                    scheduleId: null,
                    dayOfWeek: "",
                    startTime: "",
                    endTime: "",
                    isWorkday: true
                };
                this.detailDialogVisible = false;
            },
            handleDetailCancel() {
                this.handleDetailClose();
            },
            handleAddDetail() {
                const schedule_id = this.scheduleId;
                this.detailForm = {
                    scheduleId: schedule_id,
                    dayOfWeek: "",
                    startTime: "",
                    endTime: "",
                    isWorkday: ''
                };
                this.detailDialogVisible = true;
            },
            handleEditDetail(index, row) {
                this.detailForm = { ...row };
                this.detailDialogVisible = true;
            },
            handleDeleteDetail(index, row) {
                this.$confirm("此操作将永久删除该排班详情, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        deleteScheduleDetailById(row.id).then((res) => {
                            if (res.data.code === 200) {
                                this.$message.success("删除成功");
                                this.getDetailsList();
                            } else {
                                this.$message.error("操作失败，状态码：" + res.data.code);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message.info("已取消删除");
                    });
            },
            getDetailsList() {
                const schedule_id = this.scheduleId;
                getScheduleDetailsList({
                    scheduleId: schedule_id,
                    pageNum: 1,
                    pageSize: 10
                }).then((res) => {
                    this.scheduleDetails = res.data.data || [];
                });
            }
        },
        mounted() {
            // 如果刷新页面，从 localStorage 中读取
            this.scheduleId = localStorage.getItem("scheduleId");
            this.getDetailsList();
        }
    };
</script>

<style lang="less" scoped>
    .schedule-details-management {
        height: 90%;
        .common-table {
            position: relative;
            height: calc(100% - 50px);
            /deep/ .el-table td,
            /deep/ .el-table th {
                text-align: center;
            }
        }
    }
</style>